<template>
  <div class='app-container'>
    <div ref="graphContainer" class="parent-wrapper">
      <div class="btn-wra">
        <a-button type="primary" @click="clear">清空画布</a-button>
        <a-button type="primary" @click="createGraph">创建组</a-button>
        <a-button type="primary" @click="isToggleSize">画布大小：{{isChangeSize ? '可变' : '锁定'}}</a-button>
        <a-button type="primary" @click="isToggleCeilSize">节点大小：{{isCeilSize ? '可变' : '锁定'}}</a-button>
        <a-button type="primary" @click="isTogglePosi">节点状态：{{isposition ? '开放' : '锁定'}}</a-button>
        <a-button type="primary" @click="isToggleLig">改变鼠标滑过高亮的颜色</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import mxgraph from '@utils/init.js';
const { mxGraph,mxCellTracker,mxClient,mxCodec,mxUtils,mxConstants,mxPerimeter } = mxgraph;


export default {
  name: '',
  module_index: 200,
  module_name: '关于一些状态的变更',
  data() {
    return {
      graph: null,
      parent: null,
      num: 0,
      allcell: [],
      isChangeSize: false,      // 是否随着占用区域大小改变画布大小
      isCeilSize: true,         // 节点大小是否可变
      isLig: false,             // 鼠标滑过是否高亮
      isposition: true,         // 节点是否可拖动
      iscolor: '',              // 是否已设定鼠标滑过的颜色
    };
  },
  computed: {
    getX() {
      return Number(((this.num) + Math.random() * 1080).toFixed(2))
    },
    getY() {
      return Number(((this.num) + Math.random() * 570).toFixed(2))
    },
  },
  created() { },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 创建全局容器
      this.graph = new mxGraph(this.$refs.graphContainer);

      // 创建全局父元素
      this.parent = this.graph.getDefaultParent();
    },
    // 清空画布
    clear() {
      this.graph.removeCells(this.allcell)
    },
    // 创建组
    createGraph() {
      ++this.num;
      var v1 = this.graph.insertVertex(this.parent,null,'Hello',this.getX,this.getY,80,30);
      ++this.num;
      var v2 = this.graph.insertVertex(this.parent,null,'World',this.getX,this.getY,80,30);
      ++this.num;
      var v3 = this.graph.insertVertex(this.parent,null,'everyBody!',this.getX,this.getY,60,60);
      this.graph.insertEdge(this.parent,null,'',v1,v2);
      this.graph.insertEdge(this.parent,null,'',v2,v3,'edgeStyle=orthogonalEdgeStyle;');
      this.graph.insertEdge(this.parent,null,'',v3,v1);

      this.allcell.push(v1)
      this.allcell.push(v2)
      this.allcell.push(v3)
    },
    // 是否随着占用区域大小改变画布大小
    isToggleSize() {
      this.isChangeSize = !this.isChangeSize;
      this.graph.setResizeContainer(this.isChangeSize);
    },
    // 节点大小是否可变
    isToggleCeilSize() {
      this.isCeilSize = !this.isCeilSize;
      this.graph.setCellsResizable(this.isCeilSize);
    },
    // 节点位置是否可变
    isTogglePosi() {
      this.isposition = !this.isposition;
      this.graph.setEnabled(this.isposition);
    },
    // 鼠标滑过高亮
    isToggleLig() {
      if (this.iscolor) {
        this.$message.warning('高亮颜色已设定，色值为：' + this.iscolor);
        return;
      }
      this.$confirm({
        title: '询问',
        content: '此属性设置后不可取消、不可变更，是否继续？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.iscolor = 'rgb(' + (Math.random() * 255).toFixed(0) + ', ' + (Math.random() * 255).toFixed(0) + ', ' + (Math.random() * 255).toFixed(0) + ')';
          new mxCellTracker(this.graph,this.iscolor);
        },
      });
    },
  }
};
</script>

<style scoped>
.btn-wra {
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px 20px;
  white-space: nowrap;
}
.btn-wra > .ant-btn.ant-btn-primary {
  margin-right: 15px;
}
</style>